<template>
  <div id="SamstoFridge">
    <breadcrumb content="库位浏览" v-if="isBreadcrumb" />
    <div class="bodyContent">
      <Splitpanes class="area" click>
        <Pane size="30">
          <vxe-toolbar>
            <template #buttons>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" @click="handleSearch"></vxe-button>
            </template>
            <template #tools>
              <span class="text-shadow text-bold text-20 margin-lr-xs">仓库/库位</span>
            </template>
          </vxe-toolbar>
          <el-scrollbar style="height:calc(100% - 40px)">
            <div class="padding-lr padding-tb">
                  <div v-for="(item, index) in samstoList" class="house-box margin-top">
                    <div class="house-box-title">
                      <span class="text-shadow text-bold text-16 margin-left-sm">{{ item.stoName }}</span>
                    </div>
                    <div class="house-box-content margin-tb">
                            <div v-for="(op, idx) in item.children" :key="idx" class="house-position" :class="curParentCulBox===item.stoName+idx?'actived':''" @click="storageClick(item,op, idx)">
                              <div class="text-bold text-shadow">{{op.stoName}}</div>
                              <div>冰箱:<span class="text-bold margin-lr-xs">{{op.baseData ? op.baseData.sfNum:0}}</span>台</div>
                              <div>架子:<span class="text-bold margin-lr-xs">{{op.baseData ? op.baseData.sflNum:0}}</span>个</div>
                              <div>孔位:<span class="text-bold margin-lr-xs">{{op.baseData ? op.baseData.ssoNum:0}}</span>个</div>
                              <div>已用:<span class="text-bold margin-lr-xs">{{getOccupy(op)}}</span>%</div>
                              <div class="text-green text-bold text-shadow">空位:<span class="text-bold margin-lr-xs">{{emptyNum(op)}}</span>个</div>
                            </div>
                      </div>
                  </div>
            </div>
          </el-scrollbar>
        </Pane>
        <Pane size="70">
          <vxe-toolbar class-name="padding-lr">
            <template #buttons>
              <div class="text-bold text-shadow text-18">
                <span class="text-shadow text-bold text-20 margin-lr-xs">当前选中:</span><span class="text-blue">{{dataForm.stoPidName}}</span>/<span class="text-green">{{dataForm.stoName}}</span>/<span class="text-orange">{{dataForm.fridge}}</span>/<span class="text-olive">{{dataForm.layer}}</span>/<span class="text-pink">{{dataForm.specbox}}</span>
              </div>
            </template>
          </vxe-toolbar>
          <el-scrollbar style="height:calc(100% - 40px)">
            <div style="display: flex;flex-wrap: wrap;gap: 10px;padding: 10px;">
                <SamstoFridgeSelectV1 ref="specboxModelListRef" :currentRow="curSelectRow" @findList="findList" @clickCell="clickCell" @addCell="handleSearch" />
            </div>
          </el-scrollbar>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue'; //面包屑
import { reactive, ref, getCurrentInstance, onMounted, watch } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { AppStore } from '@/stores/store';
import SamstoFridgeSelectV1 from "./storagedisplay/SamstoFridgeSelectV1.vue";
import SamstoSpecboxSelect from "./storagedisplay/SamstoSpecboxSelect.vue";
import StoragedisplayLab from "./storagedisplay/StoragedisplayLab.vue";
import SamStoLabInfo from "./storagedisplay/SamStoLabInfo.vue";
import {IsEmpty, sortByField} from '@/utils/common';
import {VxeMessage, VxeNotifyType} from "@/utils/CommonMessage";
let store = AppStore();

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
const props = defineProps({
  isBreadcrumb: { type: Boolean, default: true }
});
// 左侧表格:
const curSelectRow = ref({});
let specboxData = reactive({});
let specboxModelListRef: any = ref(null);
const asknDicts = reactive([]);
const isPageDisabled = ref(true);
let samstoList = reactive([]);//仓库列表
let curParentCulBox = ref('');/**培养瓶父容器 */

// 右侧表单:
const samstoFridgeSelectRef = ref<InstanceType<typeof SamstoFridgeSelect>>(); //基本信息表单标记ref
const samstoSpecboxSelectRef = ref<InstanceType<typeof SamstoSpecboxSelect>>(); //基本信息表单标记ref
const storagedisplayLabRef = ref<InstanceType<typeof StoragedisplayLab>>(); //基本信息表单标记ref
const samStoLabInfoRef = ref<InstanceType<typeof SamStoLabInfo>>(); //基本信息表单标记ref
const activeName = ref('infoForm');
const activeLablist = ref('inLablist');

let dataForm = reactive({
  stoPidName:'',
  stoPid:'',
  stoName:'',
  stoId:'',
  fridge:'',
  layer:'',
  specbox:'',
});

// 方法定义区 =============
onMounted(() => {
  handleSearch();
});
//暴露属性和方法
defineExpose({
  handleSearch
})

//仓库点击事件
function storageClick(item,op, idx){
  dataForm.stoPidName=item.stoName;
  dataForm.stoPid=item.id;
  dataForm.stoName=op.stoName;
  dataForm.stoId=op.id;
  dataForm.fridge='';
  dataForm.layer='';
  dataForm.specbox='';
  curParentCulBox.value = item.stoName+idx;
  specboxModelListRef.value.getStorageList(op,dataForm);
}

// 表格选中当前行
function showLabInfo(row: any) {
  curSelectRow.value = row;
  samStoLabInfoRef.value?.loading(row);
}

//获取占用
function getOccupy(op :any){
  if (IsEmpty(op.baseData)){
      return 0;
    }
  const occupyNum = (IsEmpty(op.baseData.ssoNotEemptyNum)? 0:op.baseData.ssoNotEemptyNum)/op.baseData.ssoNum*100;
 return  parseFloat(String(occupyNum)).toFixed(2);
}

//获取空位
function emptyNum(op :any){
  if (!IsEmpty(op.baseData)){
    const emptyNum = op.baseData.ssoNum - (IsEmpty(op.baseData.ssoNotEemptyNum)? 0:op.baseData.ssoNotEemptyNum);
    return emptyNum;
  }
  return 0;

}


// 新增
async function handleSearch() {
  activeName.value = "infoForm";
  samstoList.length = 0;
  const url = '/api/samsto/samstoStorage/allList';
  proxy.$http
      .get(url)
      .then((res: any) => {
        //resultList.push(...res.data);
        samstoList.push(...res.data);
        if (samstoList.length>0){

          curParentCulBox.value = samstoList[0].stoName+0;
          dataForm.stoPidName=samstoList[0].stoName;
          dataForm.stoPid=samstoList[0].id;
        }
        if (samstoList.length>0 && samstoList[0].children.length>0){
          dataForm.stoName=samstoList[0].children[0].stoName;
          dataForm.stoId=samstoList[0].children[0].id;
          specboxModelListRef.value.getStorageList(samstoList[0].children[0],dataForm);
        }
      })
      .catch((err) => {
        VxeMessage(err, VxeNotifyType.error);
      });
}
function findList() { }
function clickCell(val: any) {
  console.log('val',val);
  dataForm.fridge=val.fridge;
  dataForm.layer=val.layer;
  dataForm.specbox=val.specbox;
  //specboxData=val.orderData;
  specboxData=val;
  proxy.$emit('changeBox', specboxData);
}
</script>
<style lang="scss" scoped>
#SamstoFridge {
  width: 100%;
  height: 100%;
  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);
    .area {
      background-color: $base-white;
      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }
      .tableBox {
        height: calc(100% - 40px);
      }
      .padding-tb{
        padding-top: 0px;
        padding-bottom: 15px;
      }
      .el-tabs {
        border: none;
        height: 100%;
        :deep(.el-tabs__content) {
          padding: 0;
          height: calc(100% - 39px);
          .el-tab-pane {
            height: 100%;
          }
          #pane-0 {
            padding: 15px;
            height: calc(100% - 30px);
          }
        }
      }
    }
    .bankItemContent {
      min-height: 600px;
      border-radius: 10px;
    }

    .disabled {
      pointer-events: none;
      opacity: 0.5;
    }
  }
}
.house-box {
  padding: 5px;
  background-color: #f2f2f2;
  border-radius: 5px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  //border: solid 1px #bfb8b8;
  cursor: pointer;
}
.house-box-title {
  border-bottom: solid 1px #a7a7a7;
  padding-bottom: 5px;
}
.house-box-content {
  display: flex;
  flex-wrap: wrap; /* 横向排列并换行 */
  gap: 5px;
  padding: 5px;
}
.house-position {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  padding: 5px;
  width: calc(33.33% - 4px); /* 每行最多显示3个试管架 */
  box-sizing: border-box;
  height: 140px;
}

:deep(.actived) {
  background-color: #66e4f5 !important;
}
</style>

